<template>
    <div class="layout-root">
        <div class="sidebar">
            <!-- 用户信息区域 -->
            <div class="user-section">
                <div class="user-avatar">
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="User Avatar" />
                </div>
                <div class="user-info">
                    <div class="user-name">{{ userName }}</div>
                    <div class="user-role">Admin</div>
                </div>
            </div>
            
            <el-menu class="menu-list" :default-active="activeMenu" background-color="transparent" text-color="#271E4A"
                active-text-color="#271E4A" router>
                <el-menu-item index="/home">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>预约管理</span>
                    </template>
                    <el-menu-item index="/RegisterView">预约挂号</el-menu-item>
                    <el-menu-item index="/DoctorScheduleView">预约排班</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>医院信息</span>
                    </template>
                    <el-menu-item index="/DoctorManage">医生管理</el-menu-item>
                    <el-menu-item index="/DepartmentView">科室管理</el-menu-item>
                    <el-menu-item index="/AppointmentNotice">预约须知</el-menu-item>
                   
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="/AccountGet">用户管理</el-menu-item>
                    <el-menu-item index="/RoleGet">角色管理</el-menu-item>
                    <el-menu-item index="/PermissionGet">权限管理</el-menu-item>
                    <el-menu-item index="/about">关于系统</el-menu-item>
                </el-sub-menu>
                 <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>订单设置</span>
                    </template>
                    <el-menu-item index="/ConsultationView">问诊单管理</el-menu-item>
                    <el-menu-item index="/RegisterView">挂号管理</el-menu-item>
                    <el-menu-item index="/MedicineView">药品订单管理</el-menu-item>
                    <el-menu-item index="/PrescriptionView">处方流转订单管理</el-menu-item>
                    <el-menu-item index="/RefundView">退款申请</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>患者信息</span>
                    </template>
                    <el-menu-item index="/PatientDashboard">患者档案</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>内容管理</span>
                    </template>
                    <el-menu-item index="/CarouselList">轮播图信息</el-menu-item>
                    <el-menu-item index="/HospitalList">医院信息</el-menu-item>
                    <el-menu-item index="/FirstLevelDepartmentList">科室信息</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="7">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>医生管理</span>
                    </template>
                    <el-menu-item index="/NewDoctor/DoctorManage">医生管理</el-menu-item>
                    <el-menu-item index="/NewDoctor/DoctorAudit">医生审核</el-menu-item>
                    <el-menu-item index="/NewDoctor/ServiceAudit">服务审核</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="8">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/RefundManage">退款申请</el-menu-item>
                    <el-menu-item index="/MedicineOrderManage">药品订单管理</el-menu-item>
                    <el-menu-item index="/PrescriptionOrderManage">处方流转订单管理</el-menu-item>
                    <el-menu-item index="/ConsultationManage">问诊单管理</el-menu-item>
                    <el-menu-item index="/RegisterManage">挂号单管理</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="main-content">
            <div class="header-bar">
                <div class="header-title"></div>
                <div class="header-user">
                    <el-avatar :size="36" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <el-dropdown>
                        <span class="user-name">{{ userName }}</span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="goUserProfile">个人设置</el-dropdown-item>
                                <el-dropdown-item @click="goSystemSetting">系统设置</el-dropdown-item>
                                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="main-router-view">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, Document, User, Setting } from '@element-plus/icons-vue'
import { getUserPermissions } from '@/http/axiosRead'

const router = useRouter()
const route = useRoute()
const userName = ref(localStorage.getItem('name') || '管理员')
const activeMenu = ref(route.path)
const menuTree = ref<any[]>([])
const openMenus = ref<string[]>([])

const buildMenuTree = (list: any[], parentId: number = 0): any[] => {
    return list
        .filter(item => item.parentId === parentId)
        .sort((a, b) => a.number - b.number)
        .map(item => ({
            ...item,
            children: buildMenuTree(list, item.id)
        }))
}

onMounted(async () => {
    const userId = localStorage.getItem('Uid')
    if (!userId) return
    const res = await getUserPermissions(userId)
    // 兼容后端返回字段
    const list = res.data.data.map((item: any) => ({
        ...item,
        id: item.id ?? item.Id,
        permissionName: item.permissionName ?? item.PermissionName,
        permissionURL: item.permissionURL ?? item.PermissionURL,
        parentId: item.parentId ?? item.ParentId,
        number: item.number ?? item.Number
    }))
    menuTree.value = buildMenuTree(list, 0)
})

function logout() {
    localStorage.clear()
    router.replace('/')
}
function goUserProfile() {
    router.push('/user-profile')
}
function goSystemSetting() {
    router.push('/about')
}

function handleOpenMenu(index: string) {
    // 只允许一个一级菜单展开
    openMenus.value = [index]
}
</script>

<style scoped>
/* 引入Kanit字体 */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.layout-root {
    display: flex;
    height: 100vh;
    background: linear-gradient(135deg, #D8D2FC 0%, #FDE2E0 28.35%, #E6E4EA 58.79%, #E0E9F4 100%);
    font-family: 'Kanit', 'Microsoft YaHei', sans-serif;
}

.sidebar {
    width: 194px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: 0px 4px 15px rgba(216, 210, 252, 0.64);
    margin: 8px;
    border-radius: 20px;
    height: calc(100vh - 16px);
}

/* 用户信息区域 */
.user-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(216, 210, 252, 0.2);
}

.user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(216, 210, 252, 0.64);
    background: white;
    margin-bottom: 15px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    text-align: center;
}

.user-name {
    font-size: 18px;
    font-weight: 400;
    color: #271E4A;
    margin: 0;
    line-height: 1.3;
}

.user-role {
    font-size: 18px;
    font-weight: 400;
    color: #271E4A;
    margin: 0;
    line-height: 1.3;
    opacity: 0.8;
}

/* 菜单列表 */
.menu-list {
    border-right: none;
    background: transparent;
    flex: 1;
    padding: 20px 15px;
}

/* 菜单项基础样式 */
.el-menu-item,
.el-sub-menu__title {
    border-radius: 20px;
    margin: 8px 0;
    height: 64px;
    line-height: 64px;
    font-size: 18px;
    font-weight: 400;
    background: white;
    box-shadow: 0px 4px 15px rgba(216, 210, 252, 0.64);
    transition: all 0.3s ease;
    padding: 0 20px;
    color: #271E4A !important;
}

/* 菜单项图标 */
.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
    width: 26px;
    height: 26px;
    margin-right: 15px;
    color: #271E4A;
}

/* 子菜单项 */
.el-menu .el-menu-item {
    border-radius: 15px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    margin: 4px 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 2px 8px rgba(216, 210, 252, 0.4);
}

/* 激活状态 */
.el-menu-item.is-active {
    background: white !important;
    box-shadow: 0px 6px 20px rgba(216, 210, 252, 0.8) !important;
    color: #271E4A !important;
    position: relative;
}

.el-menu-item.is-active::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #FFDBD9;
    border-radius: 50%;
}

/* 悬停效果 */
.el-menu-item:hover,
.el-sub-menu__title:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px rgba(216, 210, 252, 0.8) !important;
    color: #271E4A !important;
}

/* 展开的子菜单标题 */
.el-sub-menu.is-opened .el-sub-menu__title {
    background: white !important;
    box-shadow: 0px 6px 20px rgba(216, 210, 252, 0.8) !important;
    color: #271E4A !important;
}

/* 子菜单容器 */
.el-sub-menu .el-menu {
    background: transparent;
    margin-top: 8px;
}

/* 主内容区域 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-bar {
    height: 56px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0px 2px 8px rgba(216, 210, 252, 0.3);
    padding: 0 32px;
    margin: 8px 8px 0 0;
    border-radius: 20px 20px 0 0;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-user .user-name {
    color: #271E4A;
    font-weight: 500;
    margin-left: 6px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
}

.main-router-view {
    flex: 1;
    padding: 0 8px 8px 0;
    overflow-y: auto;
    background: transparent;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .sidebar {
        width: 80px;
        padding: 20px 10px;
    }
    
    .user-info,
    .el-menu-item span,
    .el-sub-menu__title span {
        display: none;
    }
    
    .el-menu-item,
    .el-sub-menu__title {
        justify-content: center;
        padding: 0 15px;
    }
    
    .el-menu-item .el-icon,
    .el-sub-menu__title .el-icon {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
    
    .header-bar {
        margin: 0;
        border-radius: 0;
    }
    
    .main-router-view {
        padding: 0;
    }
}
</style>